<style scoped>
.grab_market_share {
  width: 100vw;
  background-color: #fff;
  position: relative;
}
.grab_market_share >>> .van-tabs__wrap {
  height: 60px;
  /* padding-bottom: 10px; */
}
.grab_market_share >>> .van-tabs__line {
  background-color: #ff6600;
}
.grab_market_share >>> .van-tab__text.van-tab__text--ellipsis {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
<template>
  <div class="grab_market_share">
    <van-tabs
      v-model="active"
      line-width="33vw"
      title-active-color="#ff6600"
      sticky
      animated
      swipeable
    >
      <van-tab>
        <template #title>
          <van-icon size="22px" name="column" />抢票大厅
        </template>
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="race.value1"
            :options="race.option1"
            get-container="#app"
          />
          <van-dropdown-item
            v-model="race.value2"
            :options="race.option2"
            get-container="#app"
          />
        </van-dropdown-menu>
        <div class="list">
          <OrderItem
            v-for="(item, index) in list"
            :key="index"
            :msg="item"
          ></OrderItem>
        </div>
      </van-tab>
      <van-tab>
        <template #title>
          <van-icon size="22px" name="underway" />订单记录
        </template>
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="order.value1"
            :options="order.option1"
            get-container="#app"
          />
          <van-dropdown-item
            v-model="order.value2"
            :options="order.option2"
            get-container="#app"
          />
        </van-dropdown-menu>
        <div class="list">
          <OrderItem
            v-for="(item, index) in list2"
            view="record"
            :key="index"
            :msg="item"
          ></OrderItem>
        </div>
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无订单纪录"
        />
      </van-tab>
      <van-tab>
        <template #title>
          <van-icon size="22px" name="manager" />我的
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import list from "./list";
import list2 from "./list2";
import OrderItem from "../../components/driver/OrderItem";
export default {
  components: { OrderItem },
  data() {
    return {
      active: 0,
      race: {
        value1: 0,
        value2: "a",
        option1: [
          { text: "即时", value: 0 },
          { text: "预约", value: 1 },
        ],
        option2: [
          { text: "武汉", value: "a" },
          { text: "长江", value: "b" },
          { text: "大运", value: "c" },
        ],
      },
      order:{
        value1: 0,
        value2: "a",
        option1: [
          { text: "全部", value: 0 },
          { text: "进行中", value: 1 },
          { text: "已完成", value: 2 },
          { text: "已取消", value: 3 },
        ],
        option2: [
          { text: "武汉", value: "a" },
          { text: "长江", value: "b" },
          { text: "大运", value: "c" },
        ],
      },
      list: [],
      list2: [],
    };
  },
  watch:{
    active(newval){
      if(newval == 2){
        this.$router.push('/driver_me')
      }
    }
  },
  created() {
    this.list = list;
    this.list2 = list2;
  },
  methods: {},
};
</script>